<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //1、预解析：分为变量预解析(变量提升)和函数预解析(函数提升)
        //变量提升就是把所有的变量声明提升到当前的作用域最前面，不提升变量赋值
        //函数提升 就是把所有的函数声明提升到当前作用域最前面，不调用函数

        // console.log(num);
        // var num = 10;
        // //undefined
        // //上面两行代码就相当于
        // var num;
        // console.log(num);
        // num = 10;

        //2、案例
        // var num = 10;
        // fun();
        // function fun(){
        //     console.log(num);
        //     var num = 20;
        // }
        //输出的结果是undeined
        //预解析就是把函数和变量整体提升到前面

         //上面的代码就相当于
         //先把var提升
        // var num;
        //函数内部的变量只会是提升到函数内部
        //变量提升完后，提升函数
        // function fun(){
        //     console.log(num);
        //     var num = 20;
        // }
        //变量和函数都提升完成后就赋值
        //num = 10;
        //fun();
        //全局的提升完成后，开始局部的
        // function fun(){
        //     var num;
        //     console.log(num);
        //     num = 20;
        // }
        //整体的预解析就是
        // var num;(2)
        // function fun(){
        //     var num; (3)(5)
        //     console.log(num);(4)
        //     num = 20;
        // }
        // num  = 10;
        // fun();(1)   //undefined


        //3、案例
        // var num = 10;
        // function fn(){
        //     console.log(num);
        //     var num = 20;
        //     console.log(num);
        // }
        // fn();
        //预解析就相当于以下代码
        // var num;
        // function fn(){
        //     var num;
        //     console.log(num);

        //     num = 20;
        //     console.log(num);
        // }
        // num = 10;
        // fn();  //undefined 20


        //4、案例
        // var a = 10;
        // f1();
        // function f1(){
        //     var b = 9;
        //     console.log(a);
        //     console.log(b);
        //     var a = '123'
        // }

        //上面的代码就相当于下面
        // var a;
        // function f1(){
        //     var b;
        //     var a;
        //     b = 9;
        //     console.log(a);
        //     console.log(b);
        //     a = '123'
        // }
        // a = 10;
        // f1(); //undefined  9

        




    </script>
</body>
</html>